<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/WEB-INF/templates/default.xhtml">
	<ui:define name="body">
		<script type="text/javascript">var dynamicImageUrlTemplate = '#{request.contextPath}/dynamic-image/image?id='</script>
		<!-- Button to trigger modal -->
				<a href="javascript://" id="addNewOfferButton" onclick="unhideElement('fromContainer'); hideElement('addNewOfferButton')" class="btn center" title="Click to add new offer">+</a>
				<div id="fromContainer" style="display: none;">
					<h:form id="newOffer" styleClass="well span6 center">
						<h2>#{messages['new.offer.form.title']}</h2>
						<div id="validationMessagesContainer" class="controls controls-row">
							<h:message for="title" styleClass="text-error" />
							<span id="localizedErrorMessage" style="display:none;" class="text-error">#{messages['new.offer.form.offer.title.required']}</span>
						</div>
						
						<div class="controls controls-row">
							<p:inputText id="title" value="#{offerBackingBean.title}" styleClass="span4" requiredMessage="#{messages['new.offer.form.offer.title.required']}" immediate="true">
								<f:validateRequired />
								<p:watermark id="titleWatermark" for="title" value="#{messages['new.offer.form.offer.title']}" />
							</p:inputText>
							
							<p:inputText id="price" value="#{offerBackingBean.price}" styleClass="span1" autocomplete="false" immediate="true">
								<p:watermark id="priceWatermark" for="price" value="#{messages['new.offer.form.offer.price']}" />
							</p:inputText>
							
							<h:selectOneMenu id="currencySelector" value="#{offerBackingBean.currency}" styleClass="pull-right">
								<f:selectItems value="#{offerBackingBean.supportedCurrencyList}" var="currency" itemLabel="#{currency}"></f:selectItems>
							</h:selectOneMenu>
							<h:inputText id="imageId" value="#{offerBackingBean.imageId}" styleClass="hidden"><f:ajax /></h:inputText>
						</div>
						
						<div style="margin-bottom: 8px;">
							<a id="imageUploadButton" href="javascript://" onclick="clickOn('hiddenImageUpload')">#{messages['new.offer.form.select.image.button']}</a>
							<img id="loadingImage" src="#{request.contextPath}/img/load.gif" class="hidden" />
							<input id="hiddenImageUpload" type="file" class="hidden" onchange="uploadImage('hiddenImageUpload')" accept="image/*" />
						</div>
						
						<p:commandLink id="removeImage" value="#{messages['new.offer.form.remove.image.link']}" action="#{offerBackingBean.removeImage()}" styleClass="hidden" onclick="removeImage()" />
						<div id="imagePreviewContainer">
						</div>
						
						<p:inputTextarea id="description" value="#{offerBackingBean.description}" styleClass="span6" rows="4" autoResize="false">
							<p:watermark id="descriptionWatermark" for="description" value="#{messages['new.offer.form.offer.description']}" />
						</p:inputTextarea>
						<div>
							<p:commandButton id="submit" action="#{offerBackingBean.createOffer()}" value="#{messages['new.offer.form.submit.button']}" update="title price description imageId :offersForm:currentOffers" styleClass="btn btn-success" onclick="handleOfferSubmission()" />
							<p:commandLink id="cancel" actionListener="#{offerBackingBean.cancelOrderCreation}" value="#{messages['new.offer.form.cancel.button']}" styleClass="btn btn-danger pull-right" oncomplete="handleOfferClearing()" immediate="true" />
						</div>
					</h:form>
				</div>
							
				<h:form id="offersForm">
					<p:outputPanel id="currentOffers">
						<div id="dashboard">
							<ul id="offersList" class="thumbnails">
								<c:forEach items="#{offerBackingBean.all}" var="offer">
									<li id="offer-#{offer.id}" class="span6">
										<div class="thumbnail">
											<c:if test="#{not empty offer.imageId}">
												<c:if test="#{offer.sold}">
													<img id="soldImage-#{offer.id}" src="#{request.contextPath}/img/sold_ribbon.png" alt="" class="soldRibbon" />
												</c:if>
												<img id="offerImage-#{offer.id}" src="#{request.contextPath}/dynamic-image/image?id=#{offer.imageId}" alt="" />
											</c:if>
											
											<h3>#{offer.title}</h3>
											<c:if test="#{offer.price != null}">
												<div>#{messages['dashboard.offer.price']}: #{offer.price} #{offer.currency}</div>
											</c:if>
											
											<div>
												<c:choose>
													<c:when test="#{USER.email == offer.seller.email}">
														<b>#{messages['dashboard.offer.your']}</b>
													</c:when>
													<c:otherwise>
														#{messages['dashboard.offer.owner']}: #{offer.seller.email}
													</c:otherwise>
												</c:choose>
											</div>

											<h:outputText value="#{offerBackingBean.convertTextToHTML(offer.description)}" escape="false" />
											
											<hr />
											<div id="actionsContainer-#{offer.id}">
												<c:choose>
													<c:when test="#{offer.sold}">
														<span class="btn-block btn-large soldText"><b>#{messages['dashboard.offer.sold']}</b></span>
													</c:when>
													<c:when test="#{USER.email != offer.seller.email}">
														<p:commandLink id="buy-#{offer.id}" title="#{messages['dashboard.buy.button']}" action="#{offerBackingBean.buy(offer.id)}" styleClass="btn-block btn-large centered-icon">
															<i class="icon-shopping-cart"></i>
														</p:commandLink>
													</c:when>
													<c:otherwise>
														<div class="btn-group row-fluid">
															<div class="span6 row-fluid">
																<p:commandLink id="editOffer-#{offer.id}" action="#{offerBackingBean.remove(offer.id)}" title="#{messages['dashboard.edit.offer.button']}" styleClass="btn-large btn-block centered-icon">
																	<i class="icon-pencil" />
																</p:commandLink>
															</div>
															<div class="span6 row-fluid left-separator">
																<p:commandLink id="removeOffer-#{offer.id}" action="#{offerBackingBean.remove(offer.id)}" title="#{messages['dashboard.remove.offer.button']}" styleClass="btn-large btn-block centered-icon">
																	<i class="icon-remove" />
																</p:commandLink>
															</div>
														</div>
													</c:otherwise>
												</c:choose>
											</div>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</p:outputPanel>
					<p:commandButton id="formRefresher" style="display:none;" update="currentOffers"></p:commandButton>
				</h:form>
				
	</ui:define>
</ui:composition>